<template>
  <view class="wrap" :style="{height:statuHeight+'px'}">
     <top-tab tabTitle="我的资料" @backClick="backClick" backColor="#5B2177"></top-tab>
		 <view class="main">
			<view class="item-list" @click="uploadClick">
				<view class="title">头像</view>
				<view class="img-icon">
					<image class="img" :src="avatarImg ? avatarImg : '../../../static/home/celebrity.jpeg'" mode="aspectFill"></image>
					<uni-icons type="arrowright" style="font-family: uniicons !important;" color=" #999999" class="iconfont" size="20"></uni-icons>
				</view>
			</view>
			<view class="item-list-input">
				<view class="title">昵称</view>
				<input placeholder="请输入昵称" v-model="userFrom.nick" placeholder-style="font-size: 24rpx;color: #999999;"/>
			</view>
			<view class="item-list-input">
				<view class="title">个人描述</view>
				<input placeholder="请输入个人描述" style="width: 80%;" v-model="userFrom.userDescribe" placeholder-style="font-size: 24rpx;color: #999999;"/>
			</view>
			<view class="item-list-input">
				<view class="title">手机号码</view>
				<input placeholder="请输入手机号码" 
				v-model="userFrom.phone" 
				maxlength="11"
				type="number"
				placeholder-style="font-size: 24rpx;color: #999999;"/>
			</view>
			<view class="item-list-radio">
				<view class="title">性别</view>
				<view class="img-icon">
					<radio-group @change="radioChange">
						<label class="uni-list-cell uni-list-cell-pd" v-for="(item,index) in sex" :key="item.value">
							<radio :value="item.value" :checked="index === current"/>{{item.label}}
						</label>
					</radio-group>
				</view>
			</view>
<!-- 			<view class="item-list">
				<view class="title">会员等级</view>
				<view class="img-icon" style="padding-right: 71rpx;font-size: 30rpx;font-family: PingFang SC;font-weight: 500;color: #333333;">黄金会员</view>
			</view> -->
		</view>
		<view class="footer-btn" @click="seave">确定更改</view>
  </view>
</template>

<script>
	import topTab from '@/components/top-tabbar.vue'
	import { $POST, $GET } from '@/network/api.js'
  export default {
		components: { topTab },
    data() {
      return {
				current: 0,
				userFrom: {
					avatarId: '', // 头像id
					nick: "", // 昵称
					phone: '', // 手机号码
					sex: '', // 性别性别 0：男，1：女
					userDescribe: "" // 个人描述
				},
				avatarImg:'',
				sex: [
					{	label: "男",	value: "0" }, 
					{ label: "女",	value: "1" }
				],
				statuHeight: uni.getSystemInfoSync().screenHeight,
			}
    },
  onLoad() {
		const userData = uni.getStorageSync('user_key') // 获取个人信息
		this.avatarImg = userData.avartImg // 回显头像
		this.avatarId = userData.avatarId
		this.userFrom.nick = userData.nick // 回显昵称
		this.userFrom.userDescribe = userData.describe // 回显个人描述
		this.userFrom.phone = userData.account // 回显手机号码
		this.userFrom.sex = userData.sex // 回显个人描述
		this.current = userData.sex
	},
  methods: {
		// 更改资料
		async seave() {
			const res = await $POST("/boke-user/user/changeUserInfo",this.userFrom)
			uni.setStorageSync('user_key',res.data)
			uni.showToast({title: "修改成功", icon:'none'})
		},
		// 图片上传
		uploadClick() {
			const vm = this
			uni.chooseImage({
				  count: 1,
				  sourceType: ['album','camera'],
				  success: function(res) {
						const formData = res.tempFilePaths
						//限制上传图片大小（2M）
						for(let i = 0; i < res.tempFiles.length;i++){
							if(res.tempFiles.size > vm.Size){
									uni.showModal({
										content: '上传图片不能大于2M!',
										showCancel: false,
									});
								return false;
							}
						}
						uni.showLoading({ title: '图片上传中' })
							 uni.uploadFile({
							 	url:"http://192.168.130.238:8002/boke-item/file/fileUpload/2",
							  	filePath: formData[0],
							  	method:'post',
							  	name: 'file',
							 	header:{
							 		Authorization: uni.getStorageSync('authorization'),
									deviceID:"A13428903911"
							 	},
							  formData: { type: 2 },
							  success: (res) => {
							 		uni.hideLoading()
							 		const { data } = res
							 		const imgData = JSON.parse(data)
							 		if (imgData.code == "0000000") {
							 			const { furl, fid } = imgData.data
							 			vm.avatarImg = furl // 回显图片
										vm.userFrom.avatarId = fid // 赋值封面id
							 			uni.showToast({	title: '上传成功',	icon: 'none' })
							 		}
							  		else{
							 			uni.showToast({	title: imgData.msg,	icon: 'none' });
							 		}
							  	},
							 	fail: (error) => { wx.hideLoading() }
							 })	
						 
				  }
				})
		},
		// 单选框事件
		 radioChange(e) {
			this.userFrom.sex = parseInt(e.detail.value)
		},
		// 跳页面
		jump(path) {
			uni.navigateTo({
				url: path
			})
		},
		// 返回
		backClick() {
			uni.navigateBack({})
		}
	}
}
</script>

<style lang="scss" scoped>
	.wrap{
		background: #F2F2F2;	
	}
	.main{
		.item-list,.item-list-radio{
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #FFFFFF;
			padding: 36rpx 25rpx;
			margin-top: 35rpx;
			.title{
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
			}
			.img-icon{
				display: flex;
				align-items: center;
				.img{
					width: 50rpx;
					height: 50rpx;
					border-radius: 50%;
					margin-right: 16rpx;
				}
			}
		}
		.item-list-input{
			display: flex;
			align-items: center;
			background-color: #FFFFFF;
			padding: 0rpx 25rpx;
			margin-top: 35rpx;
			height: 100rpx;
			line-height: 100rpx;
			.title{
				width: 140rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				margin-right: 36rpx;
			}
			input{
				height: 100rpx;
				line-height: 100rpx;
			}
		}
		.item-list-radio{
			.uni-list-cell{
				margin-right: 67rpx;
				/deep/ .uni-radio-input {
					width: 24rpx !important;
					height: 24rpx !important;
					background:#FFFFFF !important;
				}
				/deep/ .uni-radio-input-checked{
					border: 1px solid #7F2EE1 !important;
				}
				/deep/ .uni-radio-input-checked:before {
				    font: normal normal normal 14px/1 uni;
				    content: "\EA08";
				    color: #7F2EE1 !important;
				    font-size: 10px;
				    position: absolute;
				    top: 50%;
				    left: 50%;
				    transform: translate(-50%,-48%) scale(.73);
				    -webkit-transform: translate(-50%,-48%) scale(.7);
				}
			}
		}
	}
	.footer-btn{
		width: 540rpx;
		height: 88rpx;
		background: linear-gradient(90deg, #B83DF1, #852CAE);
		border-radius: 44rpx;
		line-height: 44px;
		text-align: center;
		margin: auto;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		margin-top: 100rpx;
	}
</style>
